<template>
  <!-- 卡片抽象成组件 -->
  <van-card
      v-for="team in props.teamList"
      :desc="team.description"
      :title="`${team.name}`"
      :thumb="'https://img2.woyaogexing.com/2024/01/26/eed59415e34db73c!400x400.jpg'"
  >
    <template #tags>
      <van-tag plain type="danger" style="margin: 4px 4px 2px 0px">
        {{ teamStatusEnum[team.status] }}
      </van-tag>
    </template>
    <template #bottom>
      <div>
        {{ '最大人数:' + team.maxNum }}
      </div>
      <div>
        {{ '过期时间:' + team.expireTime }}
      </div>
      <div>
        {{ '创建时间:' + team.expireTime }}
      </div>

    </template>
    <!-- #footer自定义插槽 -->
    <template #footer>
      <van-button size="samll" type="primary"
                  @click="doJoinTeam(team.id)">
        加入队伍
      </van-button>
      <van-button v-if="team.userId === currentUser?.id"
                  size="samll"
                  type="primary"
                  @click="doUpdateTeam(team.id)">
        修改队伍
      </van-button>
      <van-button v-if="team.userId === currentUser?.id"
                  size="samll"
                  type="primary"
                  @click="doQuitTeam(team.id)">
        退出队伍
      </van-button>
      <van-button v-if="team.userId === currentUser?.id"
                  size="samll"
                  type="primary"
                  @click="doDelTeam(team.id)">
        解散队伍
      </van-button>
    </template>
  </van-card>
</template>

<script setup lang="ts">

import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/statusEnum.ts";
import myAxios from "../plugins/MyAxios.ts";
import {showToast} from "vant";
import {getCurrentUser} from "../service/user.ts";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

interface TeamCardListProps {
  teamList: TeamType[];
}

const props = withDefaults(defineProps<TeamCardListProps>(), {
  teamList: [] as TeamType[],
});


const currentUser = ref();
onMounted(async () => {
  currentUser.value = await getCurrentUser()
})

// 加入队伍方法，要传入队伍信息
const doJoinTeam = async (id: number) => {
  console.log("TeamId为：",id)
  // 调用后台呗
  const res = await myAxios.post("/team/join", {
    id: id
  })
  if (res?.code === 0) {
    showToast("加入成功")
  }else{
    showToast("加入失败")
  }
}

// 跳转到更新队伍界面
const doUpdateTeam = (id: number) => {
  console.log("跳转到更新页面携带id:" + id)
  router.push({
    path: "/team/update",
    query: {
      id,
    }
  })
}
// 退出队伍
const doQuitTeam = async (id: number) => {
  console.log("要退出队伍为：",id)
  // 调用后台呗
  const res = await myAxios.post("/team/quit", {
    id: id
  })
  if (res?.code === 0) {
    showToast("退出成功")
  }else{
    showToast("退出失败")
  }
}

// 解散队伍
const doDelTeam = async (id: number) => {
  console.log("解散队伍为：",id)
  // 调用后台呗
  const res = await myAxios.post("/team/rel", {
    id: id
  })
  if (res?.code === 0) {
    showToast("解散成功")
  }else{
    showToast("解散失败")
  }
}


</script>

<style scoped>

</style>